<%--
  Created by IntelliJ IDEA.
  User: lenovo
  Date: 2018/2/7
  Time: 17:21
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@include file="common/tag.jsp"%>
<html>
<head>
    <title>流量趋势图</title>
    <%@include file="common/head.jsp" %>
</head>
<body>
<h3><span class="label label-primary">当前规则</span></h3>
<label>&nbsp;&nbsp;源Ip:${rule.src_ip}&nbsp;&nbsp;</label>
<label>源端口:${rule.src_port}&nbsp;&nbsp;  </label>
<label>目的Ip:${rule.dst_ip}&nbsp;&nbsp;  </label>
<label>目的端口:${rule.dst_port}&nbsp;&nbsp;  </label>
<div id="chartmain" style="width: 600px; height: 400px;"></div>
<input name="ruleId" id="ruleId" type="hidden" value="${ruleId}"/>
<input name="ipType" id="ipType" type="hidden" value="${ipType}"/>
<input name="srcDstIp" id="srcDstIp" type="hidden" value="${srcDstIp}"/>
</body>
<script type="text/javascript">
    //初始化echarts实例

    var myChart = echarts.init(document.getElementById('chartmain'));
    //chushihua(myChart);
    fuzhi(myChart);
    //每隔3秒执行一次timelyFun方法
    window.setInterval("fuzhi(myChart)",3000);

//    从数据库读取数据赋值给echarts
        function fuzhi(myChart){
            var params = {};
            params.ruleId = $("#ruleId").val() ;
            params.ipType = $("#ipType").val() ;
            params.srcDstIp = $("#srcDstIp").val() ;
            $.ajax({
                contentType : "application/json",
                type : "GET",
                url : "/ipSort/ipTrendInfo",
                data: params ,
                dataType : "json",
                success : function(data) {
                    var recordTimeList = data.recordTimeList;
                    var recordValueList = data.recordValueList;
                    option = {
                        title: {
                            text: '流量监控'
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data:['总流量','流量增量']
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        toolbox: {
                            feature: {
                                saveAsImage: {}
                            }
                        },
                        xAxis: {
                            type: 'category',
                            boundaryGap: false,
                            data: recordTimeList,
                            axisLabel : {
                                show:true,
                                interval: 0,
                                formatter:function(val) {
                                    return val.split(" ").join("\n");
                                }
                            }
                        },
                        yAxis: {
                            type: 'value'
                        },
                        series: [
                            {
                                name:'总流量',
                                type:'line',
                                stack: '总量1',
                                data:recordValueList
                            },
                            {
                                name:'流量增量',
                                type:'line',
                                stack: '总量2',
                                data:[recordValueList[1]-recordValueList[0], recordValueList[2]-recordValueList[1],recordValueList[3]-recordValueList[2], recordValueList[4]-recordValueList[3], recordValueList[5]-recordValueList[4], recordValueList[6]-recordValueList[5], recordValueList[6]-recordValueList[5]]
                            },

                        ]
                    };


                    myChart.setOption(option);

                }
            });
        }
    <%--//初始化echarts--%>
    <%--function chushihua(myChart){--%>
        <%--var documentList = ${documentList};--%>
        <%--option = {--%>
            <%--xAxis: {--%>
                <%--type: 'category',--%>
                <%--boundaryGap: false,--%>
                <%--data: documentList,--%>
                <%--axisLabel : {--%>
                    <%--show:true,--%>
                    <%--interval: 0,--%>
                    <%--formatter:function(val){--%>
                        <%--return val.split(" ").join("\n");--%>
                    <%--}--%>
                <%--}--%>
            <%--},--%>
            <%--yAxis: {--%>
                <%--type: 'value'--%>
            <%--},--%>
            <%--series: [{--%>
                <%--data: ${recordValueList},--%>
                <%--type: 'line',--%>
                <%--areaStyle: {}--%>
            <%--}]--%>
        <%--};--%>


        <%--myChart.setOption(option);--%>
    <%--}    --%>
//    //从数据库读取数据赋值给echarts
//    function fuzhi(myChart){
//        var params = {};
//        params.ruleId = $("#ruleId").val() ;
//        params.ipType = $("#ipType").val() ;
//        params.srcDstIp = $("#srcDstIp").val() ;
//        $.ajax({
//            contentType : "application/json",
//            type : "GET",
//            url : "/ipSort/ipTrendInfo",
//            data: params ,
//            dataType : "json",
//            success : function(data) {
//                var recordTimeList = data.recordTimeList;
//                var recordValueList = data.recordValueList;
//                option = {
//                    xAxis: {
//                        type: 'category',
//                        data: recordTimeList,
//                        axisLabel : {
//                            show:true,
//                            interval: 0,
//                            formatter:function(val){
//                                return val.split(" ").join("\n");
//                            }
//                        }
//                    },
//                    yAxis: {
//                        type: 'value'
//                    },
//                    series: [{
//                        data: recordValueList,
//                        type: 'line',
//                        areaStyle: {}
//                    }]
//                };
//
//
//                myChart.setOption(option);
//
//            }
//        });
//    }


</script>
</html>
